<template>
  <div class="student-query-container">
    <!-- 查询表单 -->
    <div class="query-form">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="姓名：">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="年级：">
          <el-input
            v-model="queryParams.grade"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="班级：">
          <el-input
            v-model="queryParams.class"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 学生信息表格 -->
    <div class="student-table">
      <el-table
        :data="studentData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="id"
          label="序号"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="school"
          label="学校"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="grade"
          label="年级"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="class"
          label="班级"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        name: "",
        grade: "",
        class: "",
      },
      originalStudentData: [
        {
          id: 1,
          name: "张三",
          gender: "男",
          school: "南山一中",
          grade: "九年级",
          class: "1班",
        },
        {
          id: 2,
          name: "李红",
          gender: "女",
          school: "南山一中",
          grade: "六年级",
          class: "2班",
        },
        {
          id: 3,
          name: "赵四",
          gender: "男",
          school: "南山一中",
          grade: "五年级",
          class: "3班",
        },
      ],
      // 展示数据（动态变化）
      filteredStudentData: [],
      // 当前页数据
      studentData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      selection: [],
    };
  },
  mounted() {
    this.initializeData();
  },
  methods: {
    initializeData() {
      this.filteredStudentData = [...this.originalStudentData];
      this.pagination.total = this.filteredStudentData.length;
      this.updatePageData();
    },
    handleQuery() {
      // 执行过滤
      this.filteredStudentData = this.originalStudentData.filter((student) => {
        const nameMatch = this.queryParams.name
          ? student.name.includes(this.queryParams.name)
          : true;
        const gradeMatch = this.queryParams.grade
          ? student.grade.includes(this.queryParams.grade)
          : true;
        const classMatch = this.queryParams.class
          ? student.class.includes(this.queryParams.class)
          : true;

        return nameMatch && gradeMatch && classMatch;
      });
      this.pagination.currentPage = 1;
      this.pagination.total = this.filteredStudentData.length;
      this.updatePageData();
      this.$message.success("查询成功");
    },
    handleReset() {
      this.queryParams = {
        name: "",
        grade: "",
        class: "",
      };
      this.initializeData();
      this.$message.info("已重置查询条件");
    },
    updatePageData() {
      const start =
        (this.pagination.currentPage - 1) * this.pagination.pageSize;
      const end = start + this.pagination.pageSize;
      this.studentData = this.filteredStudentData.slice(start, end);
    },
    handleDetail(row) {
      console.log("查看详情:", row);
      this.$message.info(`查看学生 ${row.name} 的详细信息`);
      // 这里可以跳转到详情页面
      this.$router.push("/main/student-detail");
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.updatePageData();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.updatePageData();
    },
    handleSelectionChange(val) {
      this.selection = val;
    },
  },
};
</script>

<style scoped>
.student-query-container {
  padding: 20px;
  background-color: #fff;
}

.query-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.student-table {
  margin-top: 20px;
}

.el-table {
  font-size: 14px;
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

.el-button--text {
  color: #409eff;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
